import React from 'react';
import { Button, Table, Flex, Modal, Form, Input } from 'antd';
import PropTypes from 'prop-types';


/**
 * 主从表格（2级结构）
*/
const NestedTable = (props) => {
    // 父级表格行弹窗的状态
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    // 表单数据的初始值
    const [form] = Form.useForm();
    // 定义表格父亲列
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Flex wrap gap="small" className="site-button-ghost-wrapper">
                    <Button size='small' type="primary" onClick={showModal}>绑定数据源</Button>
                    <Button size='small' >详情</Button>
                </Flex>
            ),
        },
    ];
    // 显示父亲模态框
    const showModal = () => {
        setIsModalOpen(true);
    };

    // 关闭父亲模态框
    const handleCancel = () => {
        setIsModalOpen(false);
        form.resetFields(); // 清空表单数据
    };

    // 处理父亲确认操作
    const handleOk = () => {
        form
            .validateFields()
            .then(values => {
                console.log('Received values of form: ', values);
                form.resetFields(); // 提交后清空表单
                setIsModalVisible(false); // 关闭模态框
            })
            .catch(info => {
                console.log('Validate Failed:', info);
            });
    };

    //--------------------以下是子表格相关逻辑------------------------------------------
    // 定义展开行的渲染函数
    const expandedRowRender = (record) => (
        <Table
            columns={[
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '明细',
                    dataIndex: 'detail',
                    key: 'detail',
                },
                {
                    title: '操作',
                    key: 'action',
                    render: (text, record) => (
                        <Flex wrap gap="small" className="site-button-ghost-wrapper">
                            <Button size='small' type="primary">绑定数据源</Button>
                            <Button size='small'>详情</Button>
                        </Flex>
                    ),
                },
            ]}
            dataSource={record.details}
            pagination={false}
            bordered
        />
    );



    return (
        <>
            <Table
                columns={columns}
                dataSource={props.dataSource}
                expandedRowRender={expandedRowRender}
                //expandRowByClick //点击表格行会自动展开数据
                bordered
            />
            <Modal title="数据源维护" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} maskClosable={false}
                width='60%'>
                <Form
                    form={form}
                    layout="vertical"
                >
                    <Form.Item
                        name="username"
                        label="Username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input placeholder="Enter your username" />
                    </Form.Item>
                    <Form.Item
                        name="email"
                        label="Email"
                        rules={[{ required: true, message: 'Please input your email!' }]}
                    >
                        <Input placeholder="Enter your email" />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

// 添加 prop 类型验证
NestedTable.propTypes = {
    dataSource: PropTypes.arrayOf(
        PropTypes.shape({
            name: PropTypes.string.isRequired,
            key: PropTypes.string.isRequired, // 确保 key 是必需的
            address: PropTypes.string,
            age: PropTypes.number,
            children: PropTypes.arrayOf(
                PropTypes.shape({
                    key: PropTypes.string.isRequired, // 确保 key 是必需的
                    name: PropTypes.string,
                    detail: PropTypes.string
                })
            )
        })
    ).isRequired
};

export default NestedTable;